<template>
  <div class="all">
    <div class="list" v-for="(item,index) in fontData" :key="index">
      <div class="h3">{{item.main}}</div>
      <div class="pele">
        <img class="img" :src="item.imgsrc" alt />
        <span class="font">{{item.title}}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fontData: [
        {
          main: "抄表科",
          imgsrc: require("../../../img/home/blue.png"),
          title: "今天开始抄表了，请各个抄表员一定要注意安全。"
        },
        {
          main: "抄表科",
          imgsrc: require("../../../img/home/yellow.png"),
          title: "新到一批集中器设备，请各位同事看下哪些集中器需要更换的来提..."
        },
        {
          main: "抄表科",
          imgsrc: require("../../../img/home/yellow.png"),
          title: "建设路中段供水管道抢修，停水区域：上意如城、金香园西区、福..."
        },
        {
          main: "抄表科",
          imgsrc: require("../../../img/home/blue.png"),
          title: "请各个部门相关人员报账时先领导签字确认后，再拿取相应发票收..."
        },
        {
          main: "抄表科",
          imgsrc: require("../../../img/home/blue.png"),
          title: "针对一些长时间未缴费的用户，请联系催缴员进行电话或上门催缴..."
        },
        {
          main: "抄表科",
          imgsrc: require("../../../img/home/kpi.png"),
          title: "2020.01.02  抄见率指标太低，请及时分析原因并汇报情况。"
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.all {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: auto;
  margin: 5px;
  .list {
    margin: 10px 0px;
    line-height: 25px;
    .h3 {
      font-weight: 800px;
      font-size: 18px;
      text-indent: 26px;
    }
    .pele {
      display: flex;
      .img {
        margin: 3px 5px;
        width: 14px;
        height: 14px;
      }
      .font {
        flex: 100;
        font-size: 14px;
      }
    }
  }
}
</style>